<template>
  <div style="width: 1740px;height: 60px;">
    <div style="width: 100%;height:100%;margin-left: 20px;">
      <dv-border-box-2>
               <!--<dv-scroll-board :config="config" style="width:80%;height:50%;margin: 0 auto;padding-top: 10px" />-->

        <div style=" display: inline-block;margin-right: 30px;margin-left: 10px; margin-top: 8px">
          <el-cascader
            v-model="centers"
            :options="options"
            :show-all-levels="false"
            placeholder="地区选择"
            @change="handleChange"></el-cascader>
        </div>
        <div style="display: inline-block;;margin-right: 30px">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </dv-border-box-2>

    </div>

  </div>
</template>

<script>







  export default {
    name: "headnav",
    data(){
      return{
        centers:[],
        options: [],
        "config":{

          rowNum:1,
          // index: true,
          oddRowBGC:'#081F5D',
          evenRowBGC:'#081F5D',
        },
        value1: '',
      }
    },
    methods: {
      getGeo(){
        this.$axios({
          url: '/static/geoinfo/geoinfo-all.json',
          method: 'get',
        }).then(({ data }) => {
          if (data){
            // console.log("123456");
            this.options = data;
            // console.log(this.options);
          }else {
            this.options = [];
      }
      })
      },



      handleChange(centers) {
        // console.log(centers);
      }
    },
    watch: {
      // 如果 `centers` 发生改变，这个函数就会运行
    },
    mounted() {

      this.getGeo();
    }

  }


</script>

<style scoped>
  .block{
    display: block;
    position: relative;
    top: -780px;
    left: 20px;
    z-index: 10001;
  }
</style>
